<template>
  <view>
    <div class="head-score flex-center-center">
      <div class="total-score flex-center-center">
        <image
          class="total-score-img"
          mode="widthFix"
          src="@/static/images/total-score.jpg"
        />
      </div>
      <div class="circle">
        <l-circle
          :current.sync="modelVale"
          :percent="target"
          dashboard
          :trailWidth="6"
          strokeWidth="6"
          trailColor="#ff3a80"
          strokeColor="#fff"
          size="430rpx"
        >
          <div class="circle-value flex-column-center">
            <div class="t">肌肤良好指数</div>
            <div class="v">{{ target }}</div>
            <!-- <div class="total">肌肤状态良好</div> -->
          </div>
        </l-circle>
      </div>
      <!-- <div class="text">肌肤状况良好</div> -->
    </div>
    <div class="statistics flex-center-between">
      <div class="cell">
        <div class="value">{{ json.age.result || 0 }}</div>
        <div class="key">肤龄</div>
      </div>
      <div class="cell">
        <div class="value">{{ colorDispose() }}</div>
        <div class="key">肤色</div>
      </div>
      <div class="cell">
        <div class="value">{{ skinTypeDispose() }}</div>
        <div class="key">肤质</div>
      </div>
    </div>
    <div class="heptagon flex-column-center">
      <div class="map">
        <echarts ref="echarts" :option="option" canvasId="echarts"></echarts>
      </div>
      <div class="tips flex-center-center">
        <span class="icon-arror-up"></span>
        <image
          class="tip-icon"
          src="@/static/detail_tips_icon_1.png"
          :draggable="false"
        />
        小贴士：单项分数代表严重指数
      </div>
      <div class="title-tips">—— 肌肤分析结果 ——</div>
      <div class="p-text">{{ json.skin_type.context }}</div>
    </div>
    <div class="block" v-for="(r, i) in 2" :key="i">
      <div class="block-title">{{ i === 0 ? "有待提高" : "注意保养" }}</div>
      <div
        class="p40"
        v-for="(item, index) in dataArr"
        :key="index"
        v-if="
          i === 0
            ? item.score < 70 && item.key !== 'color'
            : item.score >= 70 || item.key === 'color'
        "
      >
        <div class="score flex-center-between">
          <div class="left">
            {{ item.name }}
            <span v-if="item.key === 'skin_type'">{{ skinTypeDispose() }}</span>
            <span v-if="item.key === 'color'">{{ colorDispose() }}</span>
            <span v-else>{{ item.score }}分</span>
          </div>
          <div class="tip-mini" @click="changeTipStatus(item)">?</div>
          <div class="tip-query" v-show="item.tipsStatus">{{ item.tips }}</div>
        </div>
        <div class="result" v-if="json.defeat_rank[item.key]">
          结果比
          <span>{{ (json.defeat_rank[item.key] * 100).toFixed(0) }}%</span>
          的人好
        </div>
        <div class="item-diff">
          <!-- 黑头 -->
          <div
            class="item-cell-list flex-center-center"
            v-if="item.key === 'blackhead'"
          >
            <div class="cell">
              <div class="value">{{ item.count }}</div>
              <div class="key">明显黑头数量</div>
            </div>
            <div class="cell">
              <div class="value">{{ item.area }}%</div>
              <div class="key">黑头面积占比</div>
            </div>
          </div>
          <!-- 毛孔 -->
          <div
            class="item-cell-list flex-center-center"
            v-if="item.key === 'pore'"
          >
            <div class="cell">
              <div class="value">{{ item.count }}</div>
              <div class="key">明显毛孔数量</div>
            </div>
            <div class="cell">
              <div class="value">{{ (item.area * 100).toFixed(2) }}%</div>
              <div class="key">毛孔面积占比</div>
            </div>
          </div>
          <!-- 斑点 -->
          <div
            class="item-cell-list spot flex-center-center"
            v-if="item.key === 'spot'"
          >
            <div class="cell">
              <div class="value">{{ item.B_QTBCount }}</div>
              <div class="key">其他斑</div>
            </div>
            <div class="cell">
              <div class="value">{{ item.Z_ZCount }}</div>
              <div class="key">雀斑</div>
            </div>
            <div class="cell">
              <div class="value">{{ item.B_QBCount }}</div>
              <div class="key">黄褐斑</div>
            </div>
            <div class="cell">
              <div class="value">{{ item.B_HHBCount }}</div>
              <div class="key">痣</div>
            </div>
          </div>
        </div>
        <!-- 肤色 -->
        <div
          class="item-cell-list fase-color flex-center-between"
          v-if="item.key === 'color'"
        >
          <div
            class="cell flex-column-center"
            :class="{ active: index == 2 }"
            v-for="(item, index) in colorOptions"
            :key="index"
          >
            <div class="value" :style="{ background: item.color }"></div>
            <div class="key">{{ item.name }}</div>
          </div>
        </div>
        <!-- 图片 -->
        <div
          class="recognition-img"
          v-if="item.filename"
          @click="onShowImg(item.filename)"
        >
          <image
            class="img"
            :src="FILE_URL + item.filename"
            :draggable="false"
            mode="aspectFill"
          />
        </div>
        <!-- 进度表 -->
        <div class="schedule flex-center" v-if="item.progress.arr">
          <div class="left"></div>
          <div class="right">
            <div
              class="cell"
              v-for="(level, levelIndex) in item.progress.level"
              :key="levelIndex"
            >
              <div class="text">{{ level }}</div>
              <div class="line"></div>
              <div
                class="border"
                :style="{ height: item.progress.arr.length * 65 + 'rpx' }"
              ></div>
            </div>
          </div>
          <div class="value-block">
            <div
              class="item flex-center"
              v-for="(child, childIndex) in item.progress.arr"
              :key="childIndex"
            >
              <div class="key-text">{{ child.key }}</div>
              <div class="hold">
                <div
                  class="flex-center value-show"
                  :style="{ width: child.width + 'rpx' }"
                >
                  <div class="place"></div>
                  <div class="dot"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="result-percentage-box"></div>
        <div class="p-text">{{ item.context }}</div>
      </div>
    </div>
    <previewImages :imgUrls="imageViews" :show.sync="imageShow"></previewImages>
  </view>
</template>

<script>
// // 肌肤年龄（age）
// // 斑点（spot）
// 斑点分类（category）
// // 毛孔（pore）
// 毛孔区域分类（category）
// // 肤质（skin_type）
// 痤疮（acne）
// 脸部特征（features）
// // 棕色斑（chloasma）
// 粗糙度（roughness）
// // 肤色（color）
// 皮肤病（disease）
// // 纹理（texture）
// 紫外斑（uv_spot）
// 水分（moisture）
// // 皱纹（wrinkle）
// 脸部切割区域坐标点（region）
// // 黑头（blackhead）
// // 痘痘（pockmark）
// // 黑眼圈（dark_circle）
// 颜值（appearance）
// 人脸特征向量（recognition）
// 脸型（face_shape）
// 嘴巴（lip_shape）
// 下巴（chin_shape）
// 眼睛（eye_shape）
// 眉毛（brow_shape）
// 鼻子（nose_shape）
// 额头（forehead）
// 发际线（hairline）
// 表情（expression）
// 图片质量检测（image_detect）
// 情绪检测（emotion）
// 人脸检测（face_detect）
// 红区检测（red_area）
// 敏感度（sensitive）
// 三庭五眼（face_ratio）
// 击败人数（defeat_rank）
import * as echarts from "echarts";
import { BASE_URL, FILE_URL } from "@/config";
import lCircle from "@/components/l-circle/l-circle";
import previewImages from "@/components/previewImages/previewImages";
export default {
  components: { lCircle, previewImages },
  data() {
    return {
      FILE_URL,
      json: {
        age: null,
        color: null,
        skin_type: null,
      },
      imageViews: [],
      imageShow: false,
      dataArrKay: [
        {
          key: "dark_circle",
          name: "黑眼圈",
          tips: "黑眼圈有三种：色素型，血管型、阴影型。色素型黑眼圈：日晒、眼周皮肤病、皮肤损伤、化妆品沉积等黑色素过度沉积引起眼圈周围颜色加深。血管型黑眼圈：眼睛周围的皮肤很薄，如果局部血液循环不好，血液中去氧的血红蛋白增多，血管通过眼睑皮肤透出青紫色，造成颜色黯淡。阴影型黑眼圈：眼睛周围的皮肤下垂、肌肉松弛、导致眼袋突出，造成局部阴影，让人看起来好像有很重的黑眼圈，其实是眼睛周围的结构发生变化，形成阴影，造成黑眼圈。",
        },
        {
          key: "wrinkle",
          name: "皱纹",
          tips: "皱纹的形成：皮肤的正常衰老、皮肤附属器官功能的自然衰退、皮肤的新陈代谢减慢，使得真皮层的弹性纤维和胶原纤维逐渐老化，使皮肤的张力和弹力减弱；丰富的面部表情；长期的睡眠不足、皮肤缺水、不当的减肥、缺乏体育锻炼；化妆品的使用不当、烟酒的刺激。皱纹分为真性皱纹和假性皱纹。真性皱纹是面部形成的非手术或注射不能祛除的稳定性皱纹，此种皮肤的胶原纤维和弹力纤维性能下降，导致皮肤失去韧性和弹性；假性皱纹是面部出现的不稳定性的皱纹，是由于皮肤暂时性的缺水或缺乏油脂滋润引起的，这类皱纹可以通过皮肤弹性的自我调节或通过皮肤护理在一定时间内自行消退。",
        },
        {
          key: "texture",
          name: "纹理",
          tips: "检测皮肤的深浅、粗细及平滑度和饱满度。健康的角质层一般较平滑，锁水、保湿能力强；反之，如果角质层凹凸不平，则皮肤饱满感会变差，锁水能力也会随之下降。",
        },
        {
          key: "spot",
          name: "斑点",
          tips: "斑有很多种类型，一般来说多是由于黑色素增加，即日晒、压力、化学物质等增加了酪氨酸酶的活性，加速黑色素形成。雀斑：基因所致的色素性问题，受紫外线影响大。紫外线照射后，雀斑颜色可以加重、数量也可能增多，会有冬轻夏重的特点。所以一定要注意防晒。染料脉冲激光可以有效处理雀斑。黄褐斑：也被称为妊娠斑、肝斑。可能由各种原因引起，比如饮食、情绪、怀孕、温度变化等。颧部褐青色痣：多为中青年女性发病，起病年龄多在15岁之后，年龄峰值位于26～30岁间，且皮疹随年龄增加而增多，日晒、妊娠等可加重皮损。斑分为活性斑和定性斑。活性斑受外界光照和内分泌等因素影响颜色深浅会变化，是可以祛除的，如黄褐斑、日晒斑。定性斑是不受外界因素影响变化的，一旦祛除是不易再长出来，如：雀斑、老年斑、色素痣、黑变斑。",
        },
        {
          key: "chloasma",
          name: "棕色斑",
          tips: "棕色斑是比紫外线色斑更深层次(真皮层)的隐性色斑，如黄褐斑、雀斑、雀斑样痣等皮素沉着。随着年纪增长，皮肤深层的斑点可能向表皮层层递进，我们说的,“老年斑”也是从它开始。",
        },
        {
          key: "pockmark",
          name: "痘痘",
          tips: "一般痘痘的形成，有以下几个因素，但最终原因都是皮脂分泌过多和堵塞引起的 。皮脂腺发达：排出过多皮脂，油脂腺发达的人不容易肥胖但更容易得粉刺饮食不健康：食用过多高热量特别是含过多油脂和刺激性的食物内分泌失调：内分泌失调使得皮脂分泌过多，此与睡眠，休息，压力和情绪有关毛囊角质化：毛囊角质化导致皮脂腺的分泌物无法排出，进而导致毛囊破裂，发炎细胞浸润（inflammatory cells infiltration）皮脂腺过度分泌：过多的雄性或䧳性激素导致皮脂腺分泌过分旺盛。此与个人先天体质、后天环境有关。",
        },
        {
          key: "blackhead",
          name: "黑头",
          tips: "黑头称开放性粉刺 ，主要是由皮脂、细胞屑和细菌组成的一种“栓”样物，阻塞在毛囊开口处而形成的，加上空气中的尘埃、污垢和氧化作用，使其接触空气的一头逐渐变黑，经氧化后成为黑色的小点，这些小点就是被称作黑头的油脂阻塞物。",
        },
        {
          key: "pore",
          name: "毛孔",
          tips: "毛孔粗大的原因来自于皮脂分泌旺盛，多余的油脂不能及时清除，进而堵塞毛孔，使毛孔膨胀，造成皮肤弹性松弛，最后毛囊粗大。此外，慢性复发性痤疮、性激素、抽烟喝酒、睡眠不足和不当皮肤护理都可影响毛孔大小。",
        },
        {
          key: "color",
          name: "肤色",
          tips: "人的肤色主要由两个因素决定：皮肤内各种色素的含量；表皮的厚度和光线在皮肤表面的散射情况。只有从这两个因素着手，才可以让皮肤呈现白皙、细腻、完美无瑕的肤色。皮肤血液循环状态、皮肤表面光线反射、不良生活习惯及精神神经因素都会影响皮肤颜色。“白里透红”是亚洲人理想和健康的皮肤颜色。",
        },
        {
          key: "skin_type",
          name: "肤质",
          tips: "干性、中性和油性皮肤的分法，主要来自于皮脂分泌量的区别。<br/>中性皮肤：皮脂分泌量正常，皮肤角质层水含量正常（10-20%），皮肤紧致，有弹性，表面光滑润泽，细腻，是最理想的皮肤状态，一般只有婴幼儿和青少年才能拥有该类肤质。<br/>干性皮肤：皮脂分泌量低，皮肤角质层水含量低（<10%）,皮肤干燥脱屑，细腻但无光泽，肤色晦暗，易出现细小皱纹，色素沉着。<br/>油性皮肤：皮脂分泌量大，皮肤角质层含水量正常或者偏低，皮肤表面油腻，有光泽，毛孔粗大，易发生痤疮、毛囊炎。<br/>中性肌肤：皮肤皮脂腺和汗腺分泌较平衡，皮肤可以形成健康的皮脂末角质层保存适量的水分。但皮肤容易受到季节、环境、身体状况的影响而发生变化。<br/>混合性肌肤：在脸部的不同部位出现干性和油性的双重特征，皮肤虽也会出现夏季偏油、冬季偏干的状况，但T字区(前额、鼻翼和下巴)偏油，两颊偏干。<br/>",
        },
      ],
      // 严重程度
      level: {
        severe: "严重",
        moderately: "中度",
        lightly: "轻度",
        none: "无",
      },
      // B_QTB(#18FFFF)（斑_其他斑）；Z_Z(#4740A5)（痣）；B_QB(#FFE57F)（斑_雀斑）；B_HHB(#40FF81)（斑_黄褐斑）；
      cls: [
        {
          key: "B_QTB",
          color: "#18FFFF",
          name: "其他斑",
        },
        {
          key: "Z_Z",
          color: "#4740A5",
          name: "痣",
        },
        {
          key: "B_QB",
          color: "#FFE57F",
          name: "雀斑",
        },
        {
          key: "B_HHB",
          color: "#40FF81",
          name: "黄褐斑",
        },
      ],
      // echarts-七角型战士
      chartOptions: {
        color: ["#ff3a80"],
        legend: {},
        radar: [
          {
            indicator: [
              { text: "斑点", max: 100 },
              { text: "黑眼圈", max: 100 },
              { text: "纹理", max: 100 },
              { text: "毛孔", max: 100 },
              { text: "皱纹", max: 100 },
              { text: "黑头", max: 100 },
              { text: "痘痘", max: 100 },
            ],
            center: ["50%", "50%"],
            radius: 110,
            axisName: {
              formatter: (value, indicator) => {
                const row = this.findDataValue(indicator.text);
                return `{a|${row.score}分}\n${value}`;
              },
              color: "#333",
              rich: {
                a: {
                  color: "#ff3a80",
                  lineHeight: 16,
                  fontSize: 12,
                },
              },
            },
          },
        ],
        series: [
          {
            type: "radar",
            radarIndex: 0,
            data: [
              {
                value: [],
                areaStyle: {
                  color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
                    {
                      color: "#ffb0cc",
                      offset: 0,
                    },
                    {
                      color: "#ffb0cc",
                      offset: 1,
                    },
                  ]),
                },
                label: {
                  show: false,
                  distance: 1,
                  formatter: function (params) {
                    return params.value;
                  },
                },
              },
            ],
          },
        ],
      },
      option: {},
      dataArr: [],
      colorOptions: [
        {
          key: "toubai",
          name: "透白",
          color: "#f9e5d9",
        },
        {
          key: "baixi",
          name: "白皙",
          color: "#f2d5c3",
        },
        {
          key: "ziran",
          name: "自然",
          color: "#efc2a7",
        },
        {
          key: "xiaomai",
          name: "小麦",
          color: "#c19b88",
        },
        {
          key: "anchen",
          name: "暗沉",
          color: "#99715f",
        },
        {
          key: "youhei",
          name: "暗沉",
          color: "#684a42",
        },
      ],
      // 肤质类型：mix(混合性)；oil(油性)；dry(干性)；mid(中性)；mid_oil(中性偏油)；mid_dry(中性偏干)
      skinTypeOptions: [
        {
          key: "mix",
          name: "混合性",
        },
        {
          key: "oil",
          name: "油性",
        },
        {
          key: "dry",
          name: "干性",
        },
        {
          key: "mid",
          name: "中性",
        },
        {
          key: "mid_oil",
          name: "中性偏油",
        },
        {
          key: "mid_dry",
          name: "中性偏干",
        },
      ],
      modelVale: 0,
      target: 80,
    };
  },
  onLoad() {
    const params = uni.getStorageSync("resultData");
    let json = {};
    if (params) {
      json = JSON.parse(params);
    }
    let dataArr = [];
    this.dataArrKay.map((item) => {
      let obj = {
        ...item,
        ...json[item.key],
        tipsStatus: false,
        progress: {}, //进度条数据
      };
      dataArr.push(obj);
    });
    this.dataArr = dataArr;
    this.json = json;
    this.init();
    console.log(this.dataArr, "json", json);
  },
  onShow() {
    this.initChart();
  },
  methods: {
    init() {
      this.dataArr.map((item) => {
        // 黑眼圈
        if (item.key === "dark_circle") {
          item.progress = {
            level: ["轻度", "中度", "重度"],
            arr: [
              {
                key: "黑眼圈",
                value: item.score,
                width: this.scoreWidthComputed(item),
              },
            ],
          };
        }
        // wrinkle皱纹
        if (item.key === "wrinkle") {
          const options = [
            {
              key: "glabella",
              name: "眉间纹",
              color: "#FFD740",
            },
            {
              key: "crowfeet",
              name: "鱼尾纹",
              color: "#FF6E40",
            },
            {
              key: "nasolabial",
              name: "法令纹",
              color: "#6E84FF",
            },
            {
              key: "eyecorner",
              name: "眼角纹",
              color: "#64FFDA",
            },
            {
              key: "forehead",
              name: "抬头纹",
              color: "#FF5252",
            },
          ];
          const arr = item.category.map((child) => {
            const row = options.find((son) => {
              if (child.cls === son.key) {
                return true;
              }
            });
            return {
              key: row.name,
              value: child.score,
              width: this.scoreWidthComputed(child),
            };
          });
          item.progress = {
            level: ["轻度", "中度", "重度"],
            arr,
          };
        }
        //spot斑点
        if (item.key === "spot") {
          const options = [
            {
              key: "B_QTB",
              color: "#18FFFF",
              name: "其他斑",
            },
            {
              key: "Z_Z",
              color: "#4740A5",
              name: "痣",
            },
            {
              key: "B_QB",
              color: "#FFE57F",
              name: "雀斑",
            },
            {
              key: "B_HHB",
              color: "#40FF81",
              name: "黄褐斑",
            },
          ];
          const arr = item.category.map((child) => {
            item[child.cls + "Count"] = child.count;
            const row = options.find((son) => {
              if (child.cls === son.key) {
                return true;
              }
            });
            return {
              key: row.name,
              value: child.score,
              width: this.scoreWidthComputed(child),
            };
          });
          item.progress = {
            level: ["轻度", "中度", "重度"],
            arr,
          };
        }
        // 痘痘
        if (item.key === "pockmark") {
          // CC_DD(#E040FB)（）；()（）
          const options = [
            {
              key: "CC_DD",
              color: "#E040FB",
              name: "痘痘",
            },
            {
              key: "CC_DY",
              color: "#7C4DFF",
              name: "痘印",
            },
          ];
          const arr = item.category.map((child) => {
            const row = options.find((son) => {
              if (child.cls === son.key) {
                return true;
              }
            });
            return {
              key: row.name,
              value: child.score,
              width: this.scoreWidthComputed(child),
            };
          });
          item.progress = {
            level: ["轻度", "中度", "重度"],
            arr,
          };
        }
        // 黑头
        if (item.key === "blackhead") {
          item.progress = {
            level: ["轻度", "中度", "重度"],
            arr: [
              {
                key: "黑头",
                value: item.score,
                width: this.scoreWidthComputed(item),
              },
            ],
          };
        }
        // 毛孔
        if (item.key === "pore") {
          const options = [
            {
              key: "forehead",
              color: "",
              name: "额头",
            },
            {
              key: "left_cheek",
              color: "",
              name: "左脸颊",
            },
            {
              key: "right_cheek",
              color: "",
              name: "右脸颊",
            },
          ];
          const arr = item.category.map((child) => {
            const row = options.find((son) => {
              if (child.cls === son.key) {
                return true;
              }
            });
            return {
              key: row.name,
              value: child.score,
              width: this.scoreWidthComputed(child),
            };
          });
          item.progress = {
            level: ["轻度", "中度", "重度"],
            arr,
          };
        }
        // texture纹理
        if (item.key === "texture") {
          item.progress = {
            level: ["轻度", "中度", "重度"],
            arr: [
              {
                key: "纹理",
                value: item.score,
                width: this.scoreWidthComputed(item),
              },
            ],
          };
        }
        // 棕色斑
        if (item.key === "chloasma") {
          item.progress = {
            level: ["轻度", "中度", "重度"],
            arr: [
              {
                key: "棕色斑",
                value: item.score,
                width: this.scoreWidthComputed(item),
              },
            ],
          };
        }
        // 肤质
        if (item.key === "skin_type") {
          const options = [
            {
              key: "forehead",
              color: "",
              name: "额头",
            },
            {
              key: "chin",
              color: "",
              name: "下巴",
            },
            {
              key: "left_cheek",
              color: "",
              name: "左脸颊",
            },
            {
              key: "right_cheek",
              color: "",
              name: "右脸颊",
            },
            {
              key: "nose",
              color: "",
              name: "鼻梁",
            },
          ];
          const arr = item.category.map((child) => {
            const row = options.find((son) => {
              if (child.cls === son.key) {
                return true;
              }
            });
            return {
              key: row.name,
              value: child.score,
              width: this.scoreWidthComputed(child),
            };
          });
          item.progress = {
            level: ["轻度", "中度", "重度"],
            arr,
          };
        }
      });
      this.target = this.json.skin_type.score;
    },
    changeTipStatus(item) {
      item.tipsStatus = !item.tipsStatus;
    },
    initChart() {
      this.$nextTick(() => {
        const { chartOptions, json } = this;
        const arr = [
          json.chloasma.score,
          json.dark_circle.score,
          json.texture.score,
          json.pore.score,
          json.wrinkle.score,
          json.blackhead.score,
          json.pockmark.score,
        ];
        chartOptions.series[0].data[0].value = arr;
        this.option = chartOptions;
      });
    },
    findDataValue(text) {
      const dataArrKay = this.dataArrKay;
      for (let i = 0; i < dataArrKay.length; i += 1) {
        const item = dataArrKay[i];
        if (item.name === text) {
          return this.json[item.key];
        }
      }
    },
    colorDispose() {
      if (!this.json.color.result) return "";
      const obj = this.colorOptions.find((item) => {
        if (item.key === this.json.color.result) {
          return item.name;
        }
      });
      return obj.name || "";
    },
    skinTypeDispose() {
      if (!this.json.skin_type.type) return "";
      const obj = this.skinTypeOptions.find((item) => {
        if (item.key === this.json.skin_type.type) {
          return item.name;
        }
      });
      return obj.name || "";
    },
    scoreWidthComputed(item) {
      return (550 / 100) * (100 - item.score);
    },
    onShowImg(url) {
      this.imageViews = [FILE_URL + url];
      this.imageShow = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.head-score {
  height: 600rpx;
  background: #ff7aa9;
  position: relative;
  .total-score {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 600rpx;
    .total-score-img {
      width: 550rpx;
      height: 500rpx;
    }
  }
  .circle {
    margin-top: 50rpx;
    width: 430rpx;
    height: 400rpx;
    .circle-value {
      color: #fff;
      font-size: 30rpx;
      .t {
        font-size: 26rpx;
      }
      .v {
        font-size: 130rpx;
        padding: 15rpx 0;
      }
    }
  }
}
.statistics {
  position: relative;
  z-index: 1;
  width: calc(100% - 80rpx);
  margin: -50rpx auto 0;
  background: #fff;
  padding: 35rpx 0;
  box-shadow: #eee 0px 3px 5px;
  border-radius: 10rpx;
  .cell {
    border-left: 1rpx solid #e2e2e2;
    color: rgb(51, 51, 51);
    font-size: 24rpx;
    padding: 0 50rpx;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    width: 33.33%;
    .value {
      color: rgb(243, 69, 115);
      font-weight: bolder;
      line-height: 40rpx;
      font-size: 28rpx;
    }
  }
}
.heptagon {
  padding: 0 40rpx;
  .map {
    width: 100%;
    height: 700rpx;
    overflow: hidden;
  }
  .tips {
    font-size: 24rpx;
    text-align: center;
    line-height: 24rpx;
    width: 460rpx;
    background: #fff5f8;
    border-radius: 10rpx;
    position: relative;
    border: 1px solid rgb(255, 188, 211);
    color: rgb(255, 58, 128);
    background: rgb(255, 255, 255);
    height: 50rpx;
    .icon-arror-up {
      display: block;
      position: absolute;
      top: -10rpx;
      left: 50rpx;
      width: 13rpx;
      height: 13rpx;
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
      border-left: 1px solid rgb(255, 188, 211);
      border-top: 1px solid rgb(255, 188, 211);
      background: rgb(255, 255, 255);
    }
    .tip-icon {
      background-size: contain;
      background-position: 50%;
      background-repeat: no-repeat;
      width: 26rpx;
      height: 26rpx;
      display: inline-block;
      vertical-align: top;
      margin-right: 6rpx;
    }
  }
  .title-tips {
    font-size: 16px;
    text-align: center;
    margin: 20px 0 10px;
    color: rgb(255, 58, 128);
  }
}
.p-text {
  color: rgb(51, 51, 51);
  background: rgba(255, 58, 128, 0.05);
  padding: 40rpx;
  box-sizing: border-box;
  font-size: 24rpx;
  line-height: 1.6;
  border-radius: 8rpx;
  margin-top: 20rpx;
}
.block {
  .block-title {
    width: 100%;
    height: 100rpx;
    line-height: 76rpx;
    font-size: 36rpx;
    padding: 10rpx 40rpx;
    box-sizing: border-box;
    border-radius: 12rpx 12rpx 0 0;
    margin-top: 26rpx;
    background: rgb(255, 58, 128);
    color: #fff;
  }
  .score {
    position: relative;
    margin-bottom: 10rpx;
    .left {
      font-size: 18px;
      margin: 0;
      line-height: 40px;
      display: inline-block;
      vertical-align: top;
      span {
        display: inline-block;
        font-size: 28rpx;
        line-height: 50rpx;
        padding: 0 20rpx;
        border-radius: 50rpx;
        text-align: center;
        margin-top: 16rpx;
        margin-left: 20rpx;
        box-sizing: border-box;
        color: rgb(255, 58, 128);
        border: 1px solid rgb(255, 58, 128);
      }
    }
    .tip-mini {
      display: inline-block;
      width: 40rpx;
      height: 40rpx;
      background: #ccc;
      color: #fff;
      text-align: center;
      line-height: 40rpx;
      border-radius: 50%;
      font-size: 28rpx;
      margin-top: 20rpx;
    }
    .tip-query {
      position: absolute;
      top: 100rpx;
      left: 0;
      width: 100%;
      font-size: 28rpx;
      background: #fff;
      color: #333;
      box-shadow: 0 0 10px #ddd;
      z-index: 10;
      border-radius: 10rpx;
      padding: 30rpx;
      box-sizing: border-box;
      line-height: 150%;
    }
  }
  .result {
    width: 100%;
    line-height: 40rpx;
    font-size: 28rpx;
    margin-bottom: 40rpx;
    span {
      color: rgb(243, 69, 115);
      font-weight: bold;
      margin: 0 10rpx;
    }
  }
  .recognition-img {
    display: block;
    width: 400rpx;
    height: 400rpx;
    margin: 0 auto;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    .img {
      width: 100%;
      height: 100%;
    }
  }
}
.item-diff {
  padding-top: 30rpx;
}
.item-cell-list {
  .cell {
    padding: 0 40rpx;
    font-size: 36rpx;
    text-align: center;
    border-left: 1rpx solid #ccc;
    width: 300rpx;
    &:first-child {
      border-left: none;
    }
    .value {
      color: rgb(243, 69, 115);
    }
    .key {
      color: #888;
      font-size: 28rpx;
      line-height: 1.8;
    }
  }
}
.spot {
  .cell {
    width: 200rpx;
  }
}
.fase-color {
  .cell {
    width: 100rpx;
    border: none;
    padding: 0;
    .value {
      width: 60rpx;
      height: 60rpx;
      border-radius: 50%;
    }

    &.active {
      .value {
        border: 5rpx solid #fff;
        box-shadow: 0 0 5rpx 5rpx #eee;
      }
      .key {
        color: #ff7aa9;
      }
    }
  }
}
.schedule {
  padding-top: 20rpx;
  position: relative;
  width: 100%;
  .left {
    width: 20%;
    flex: 0 0 auto;
  }
  .right {
    display: flex;
    align-items: center;
    width: 80%;
    .cell {
      width: 33.33%;
      .text {
        text-align: center;
        color: #666;
        font-size: 30rpx;
        line-height: 40rpx;
        margin-bottom: 20rpx;
      }
      .line {
        height: 10rpx;
        width: 100%;
        margin-bottom: 10rpx;
        border-left: 1rpx dashed rgba(255, 58, 128, 0.2);
        border-bottom: 1rpx dashed rgba(255, 58, 128, 0.2);
        border-right: 1rpx dashed rgba(255, 58, 128, 0.2);
      }
      .border {
        width: 100%;
        height: 80rpx;
        border-right: 1rpx dashed rgba(255, 58, 128, 0.2);
      }
    }
  }
  .value-block {
    position: absolute;
    top: 90rpx;
    left: 0;
    width: 100%;
    margin-top: 10px;
    .item {
      width: 100%;
      height: 60rpx;
      .key-text {
        width: 20%;
        flex: 0 0 auto;
        font-size: 26rpx;
        color: rgb(243, 69, 115);
        padding-left: 15rpx;
      }
      .dot {
        background: rgb(243, 69, 115);
        border-radius: 50%;
        width: 32rpx;
        height: 32rpx;
        position: relative;
        margin-left: -8rpx;
        flex: 0 0 auto;
        &::after {
          content: "";
          display: block;
          position: absolute;
          top: 7rpx;
          left: 7rpx;
          width: 20rpx;
          height: 20rpx;
          background: #fff;
          border-radius: 50%;
        }
      }
      .hold {
        background: rgba(255, 58, 128, 0.2);
        width: 100%;
        height: 10px;
        position: relative;
        .value-show {
          position: absolute;
          top: -5rpx;
          left: 0rpx;
          width: 0rpx;
          .place {
            background: linear-gradient(
              90deg,
              rgba(255, 58, 128, 0.1),
              rgb(255, 58, 128)
            );
            height: 10px;
            width: 100%;
          }
        }
      }
    }
  }
}
</style>
